{extend name="common/common" /}

{block name="style"}
<link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<style media="screen">
.tips{
	border:1px solid #E6A23C;
	color:#E6A23C;
	font-size: 16px;
	box-shadow: #E6A23C 0px 2px 12px 0px;
	font-family: "宋体";
	margin-bottom: 25px;
}
.table.table-bordered.table-striped tr td {
	line-height: 26px;
}
.ibox-title h5{
	float:none;
	font-weight: 999;
}
.span-danger{
	font-family: "宋体";
	font-weight: 999;
}
.el-radio-button--mini .el-radio-button__inner {
	padding: 7px 10px;
}
.table-public-service-system{
	min-width: 1550px;
}
.el-textarea__inner {
	line-height: 0.7;
}
label{
	margin-bottom: 0;
}
.el-dialog__body input[type="file"]{
	display: none;
}
.to-primary{
	background:#ecf5ff;
}
.to-danger{
	background:#fef0f0;
}
</style>
{/block}

{block name="component"}
{/block}

{block name="content"}
<div class="ibox-title">
    <h5>
		<span class="span-primary">{{form.departName}}</span>
		映潮指数：县域电商解析
	</h5>
</div>
<div class="ibox-content">
	<el-form :model="form" :rules="rules" ref="form" label-width="110px" inline>
		<el-form-item label="填表人" prop="linkMan">
			<el-input size="mini" v-model="form.link_man"></el-input>
		</el-form-item>
		<el-form-item label="电话" prop="linkType">
			<el-input size="mini" v-model="form.link_type"></el-input>
		</el-form-item>
		<el-form-item label="报表日期" prop="rpt_date">
			<el-input size="mini" v-model="form.rpt_date" disabled></el-input>
		</el-form-item><br>
		<table class="table table-bordered table-striped text-center">
			<tr>
				<th class="text-center to-primary" colspan="4">县域网络零售概况（亿元）</th>
				<th class="text-center to-danger" colspan="3">县域排名</th>
			</tr>
			<tr>
				<th class="text-center to-primary" width="100">区县</th>
				<th class="text-center to-primary">网络零售额</th>
				<th class="text-center to-primary">实物型网络零售额</th>
				<th class="text-center to-primary">服务型网络零售额</th>
				<th class="text-center to-danger">网络零售额</th>
				<th class="text-center to-danger">实物型网络零售额</th>
				<th class="text-center to-danger">服务型网络零售额</th>
			</tr>
			<tr v-for="(dataItem, index) in form.tableCT">
				<td class="to-primary">{{dataItem.depart_name}}</td>
				<td class="to-primary">
					<el-input size="mini" type="number" step="0.01" min="0" v-model="dataItem.net_money"></el-input>
				</td>
				<td class="to-primary">
					<el-input size="mini" type="number" step="0.01" min="0" v-model="dataItem.industry_money"></el-input>
				</td>
				<td class="to-primary">
					<el-input size="mini" type="number" step="0.01" min="0" v-model="dataItem.service_money"></el-input>
				</td>
				<td class="to-danger">
					<el-input-number size="mini" v-model="dataItem.net_rank"
						controls-position="right" min="0" precision="0"></el-input-number>
				</td>
				<td class="to-danger">
					<el-input-number size="mini" v-model="dataItem.industry_rank"
						controls-position="right" min="0" precision="0"></el-input-number>
				</td>
				<td class="to-danger">
					<el-input-number size="mini" v-model="dataItem.service_rank"
						controls-position="right" min="0" precision="0"></el-input-number>
				</td>
			</tr>
		</table>
		<p class="text-center">
			<el-button type="danger" plain @click="reset">重置表格</el-button>
			<el-button type="primary" plain @click="save">保存表格</el-button>
		</p>
	</el-form>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		form:{
			depart_id:"{$depart.id}",
			depart_name:"{$depart.name}",
			rpt_date:"{$rpt_date}",
			link_man:"",
			link_type:"",
			tableCT:""
		},
		form_reset:{
			depart_id:"{$depart.id}",
			depart_name:"{$depart.name}",
			rpt_date:"{$rpt_date}",
			link_man:"",
			link_type:"",
			tableCT:""
		},
		rules:{
			link_man:[{required:true,message:'填表人不能为空',trigger:['blur','change']}],
			link_type:[{required:true,message:'联系方式不能为空',trigger:['blur','change']}],
		}
	},
	mounted:function () {
		this.getFormTableCT();
	},
	methods:{
		getFormTableCT() {
			$.post("",function(res) {
				if(res.code == 1){
					main.form.tableCT = res.data;
					main.form_reset.tableCT = res.data;
				}else{
					main.$notify.error({title:"错误",message:"接口错误"});
				}
			})
		},
		reset() {
			this.$confirm('确定要重置吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.form.tableCT = this.form_reset.tableCT;
			}).catch(() => {});
		},
		AjaxResponse(res) {
			if(res.code == 1){
				main.$notify({title:"成功",type:"success",message:res.msg})
			}else{
				main.$notify.error({title:"错误",message:res.msg})
			}
		},
		save() {
			var param = this.form;
			$.post("{:url('Icdata/saveTable_analyze_county')}",param,function(res){
				main.AjaxResponse(res);
			});
		}
	}
})
</script>
{/block}
